<template>
    <el-container>
        <el-header style="height: 60pt;">
            <Header/>
        </el-header>

        <el-container >
            <transition :name="transition" >
                <router-view></router-view>
            </transition>
        </el-container>

    </el-container>
</template>
<script>
    import Header from './Header'
    export default {
        components: {
            Header
        },
        data() {
            return {
                transition: ""
            };
        },
        watch: {
            $route(to, from) {
                if (to.meta.index > from.meta.index) {
                    this.transition = "slide-left";
                } else {
                    this.transition = "slide-right";
                }
            }
        },

    }
</script>
<style>
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
        will-change: transform;
        transition: all 500ms;
        position: absolute;
        width:100%;
        height:100%;
    }
    .slide-right-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
</style>

